'use client';

const KindeList = ({ items, style }) => {
    return (
        <div
            style={{
                width: '100%',
                display: 'flex',
                flexDirection: 'column',
                ...style
            }}
        >
            <table
                style={{
                    width: '100%'
                }}
            >
                <tbody>
                    {items.map((secu) => (
                        <tr key={secu.secu_code}>
                            <td style={{ width: '20%', whiteSpace: 'nowrap' }}>
                                {secu.secu_name}
                            </td>
                            <td style={{ width: '5%' }}>{secu.clbn}</td>
                            <td
                                style={{
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap'
                                }}
                            >
                                {(secu.common || []).join('；')}
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default KindeList;
